<template>
  <a-row :gutter='10'>
    <a-col :sm='24' style='margin-bottom: 20px'>
      <a-card :bordered='false'>
        <!-- 查询区域 -->
        <div class='table-page-search-wrapper'>
          <!-- 搜索区域 -->
          <a-form layout='inline'>
            <a-row :gutter='24'>
              <a-col :md='8' :sm='8'>
                <a-form-item :labelCol='{ span: 5 }' :wrapperCol='{ span: 18 }' label='客户电话'>
                  <a-input v-model='taskForm.phone' placeholder='请输入客户手机号'></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='8'>
                <a-form-item :labelCol='{ span: 5 }' :wrapperCol='{ span: 18 }' label='提交人'>
                  <a-input v-model='taskForm.submitter' placeholder='请输入提交人手机号'></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter='24'>
              <a-col :md='8' :sm='8'>
                <a-form-item :labelCol='{ span: 5 }' :wrapperCol='{ span: 18 }' label='线索编号'>
                  <a-input v-model='taskForm.clueCode' placeholder='请输入线索编号'></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='8'>
                <a-form-item :labelCol='{ span: 4 }' :wrapperCol='{ span: 18 }' label='任务状态'>
                  <a-select :value='this.statusValue' placeholder='请选择线索状态' @change='onStatusChange'>
                    <a-select-option v-for='item in statusOptions' :key='item.value' :value='item.value'>
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='8'>
                <a-form-item :labelCol='{ span: 2 }' :wrapperCol='{ span: 18 }'>
                  <a-button type='primary' @click='selectInfo'>查询</a-button>
                  <a-button style='margin-left: 8px' type='primary' @click='resetForm'>重置</a-button>
                  <a-button v-has="'task:export'" style='margin-left: 8px' type='primary' @click='Export'>导出</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style='margin-top: 15px'>
          <a-table
            ref='table'
            :columns='columns'
            :dataSource='dataSource'
            :loading='loading'
            :pagination='ipagination'
            :row-selection='{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }'
            bordered
            rowKey='id'
            size='middle'
            style='height: 500px'
            @change='handleTableChange'
          >
            <template slot='contacts' slot-scope='text, record'>
              <div>
                <div>
                  {{ record.contacts }}
                </div>
                {{ record.contactTel }}
              </div>
            </template>
            <span slot='status' slot-scope='status'>
              {{
                status == 1
                  ? '待分配'
                  : status == 2
                    ? '待确认'
                    : status == 3
                      ? '已分配'
                      : status == 4
                        ? '已跟进'
                        : status == 5
                          ? '已成单'
                          : status == 6
                            ? '已流单'
                            : ''
              }}
            </span>
            <span slot='action' slot-scope='next, record'>
              <a @click='showDrawer(record)'>详情</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
    <a-col v-if='this.rightcolval == 1' :sm='24'>
      <a-card :bordered='false'>
        <!-- 表单区域 -->
        <role-modal ref='modalForm' @ok='modalFormOk'></role-modal>
        <user-modal ref='modalForm2' @ok='modalFormOk2'></user-modal>
        <Select-User-Modal ref='selectUserModal' @selectFinished='selectOK'></Select-User-Modal>
      </a-card>
    </a-col>
    <!-- 详情 -->
    <div>
      <a-drawer
        :body-style="{ paddingBottom: '80px' }"
        :closable='false'
        :maskClosable='true'
        :visible='visible'
        :width='474'
        title='详情'
        @close='onClose'
      >
        <a-form hide-required-mark layout='vertical'>
          <a-row :style='pstyle1'>
            <a-col>
              <div class='title'>
                <div class='title-left'>
                  <div class='name'>
                    <span>{{ contacts }} {{ contactTel }}</span>
                    <a-tag class='tag' color='orange' style='margin-left: 10px'>
                      {{
                        editStatus == 1
                          ? '待分配'
                          : editStatus == 2
                            ? '待确认'
                            : editStatus == 3
                              ? '已分配'
                              : editStatus == 4
                                ? '已跟进'
                                : editStatus == 5
                                  ? '已成单'
                                  : editStatus == 6
                                    ? '已流单'
                                    : ''
                      }}
                    </a-tag>
                  </div>
                </div>
                <div class='title-right'>
                  <a-button class='btn' @click='openAllotDialog'>编辑</a-button>
                  <a-button
                    v-if='updateShow'
                    class='btn' @click='updateExamine'>审核
                  </a-button>
                  <a-button v-if='editStatus<3' class='btn' type='primary' @click='getallot'>分配</a-button>
                </div>
              </div>
            </a-col>
            <a-col
            >
              <div class='allotDialog-remarks'>备注：{{ remarks }}</div>
            </a-col
            >
          </a-row>
          <a-row :style='pstyle2'>
            <a-col class='flex flex-a-c flex-j-s-b'>
              <div class='col-title'>业务类型</div>
              <span class='col-text'>{{ serviceId_dictText }}</span>
            </a-col>
            <a-col class='flex flex-a-c flex-j-s-b'>
              <div class='col-title'>线索编号</div>
              <span class='col-text'>{{ leadsCode }}</span>
            </a-col>
            <a-col class='flex flex-a-c flex-j-s-b'>
              <div class='col-title'>订单编号</div>
              <span class='col-text'>{{ orderCode }}</span>
            </a-col>
          </a-row>
          <a-row :style='pstyle2'>
            <div class='timeTitle'>记录</div>
            <a-timeline>
              <a-timeline-item v-for='(item, index) in threadData' :key='index'>
                <div class='timeline-title'>
                  <div v-if='item.status' class='timeline-time'>{{ item.status }}</div>
                </div>
                <div class='timeline-line'>
                  <div v-if='item.content'>备注:{{ item.content }}</div>
                  <!--                  <div class="text">-->
                  <!--                    <a-button @click="upAfterSaleFollowUp(item.status)" v-if="!item.content">完成</a-button>-->
                  <!--                  </div>-->
                </div>
              </a-timeline-item>
            </a-timeline>
          </a-row>
        </a-form>
      </a-drawer>
    </div>
    <!-- 编辑和分配弹框 -->
    <a-modal
      :visible='visibleCreateModal'
      destroyOnClose
      okText='确定'
      title='编辑'
      @cancel='handleModalCancel'
      @ok='handleModalOk'
    >
      <div class='allotDialog-top'>
        <a-button
          v-for='(item, index) in btnList'
          :key='index'
          :class="index == btnIndex ? 'active' : ''"
          @click='getBtnIndex(index)'
        >{{ item.label }}
        </a-button
        >
      </div>
      <div class='money'>
        <div class='input-title'>合同金额</div>
        <a-input v-model='moneyValue' placeholder='请输入合同金额' type='text'></a-input>
      </div>
      <div v-if='btnIndex == 1' class='money'>
        <div class='input-title'>公司名称</div>
        <a-input v-model='companyValue' placeholder='请输入公司名称' type='text'></a-input>
      </div>
      <div v-if='btnIndex == 1' class='money'>
        <div class='input-title'>金牌类型</div>
        <a-select v-model='goldMedalValue' placeholder='请输入公司名称' style='width: 100%' @change='ss'>
          <a-select-option v-for='item in goldMedalList' :key='item'>
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <!---->
      <div class='select-content'>
        <div class='select-title'>
          <div><span>备注</span> 必填,不超过100个字</div>
        </div>
        <div class='select-input'>
          <a-input v-model='areaValue' placeholder='请输入备注' type='textarea'></a-input>
        </div>
      </div>
      <div class='select-content'>
        <div class='select-title'>
          <div><span>附件</span> 附件选填，最多五张，每张大小不超过1m</div>
        </div>
        <div class='select-input'>
          <j-image-upload v-model='imgUrl' class='avatar-uploader' text='上传'></j-image-upload>
          <a-modal :footer='null' :visible='previewVisible' @cancel='handleCancel'>
            <img :src='previewImage' alt='example' style='width: 100%' />
          </a-modal>
        </div>
      </div>
    </a-modal>
    <!-- 分配弹框 -->
    <a-modal :visible='allotDialog' destroyOnClose okText='确认分配' title='分配' @cancel='cancelDialog' @ok='allotOK'>
      <div class='allotDialog'>
        <div class='allotDialog-info'>
          <div class='info-left'>
            <div class='phone'>
              <span>{{ contacts }}</span> <span>{{ contactTel }}</span>
            </div>
            <div class='info-tag'>
              {{
                editStatus == 1
                  ? '待分配'
                  : editStatus == 2
                    ? '待确认'
                    : editStatus == 3
                      ? '已分配'
                      : editStatus == 4
                        ? '已跟进'
                        : editStatus == 5
                          ? '已成单'
                          : '已流单'
              }}
            </div>
          </div>
          <div class='info-right'></div>
        </div>
        <div class='allotDialog-remark'>备注：{{ remarks }}</div>
      </div>
      <!---->
      <div class='select-content'>
        <div class='select-title'>
          <div>选择要分给的对象</div>
          <div>只可分配给您的下属</div>
        </div>
        <div class='select-btn'>
          <div>
            <a-cascader
              v-model='departmentValue'
              :field-names="{ label: 'departName', value: 'key', children: 'children' }"
              :options='optionss'
              placeholder='请选择要分给的部门'
              @change='typeChange'
            />
          </div>
          <div>
            <a-select v-model='ownerUservalue' style='width: 200px'>
              <a-select-option v-for='item in roleList' :key='item.id'>
                {{ item.username }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </a-modal>
    <examine-add @examineClose="examineChange" ref='examineAdd'></examine-add>
  </a-row>
</template>
<script>
import {
  queryById,
  jbdLeadList,
  followUp,
  orderFormOrflow,
  paymentReceipt,
  getDepartSelect,
  getRoleSelect,
  leadsDistribution
} from '@/api/threadManage'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl } from '@/api/manage'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'

// import { deleteAction, postAction, getAction } from '@/api/manage'
// import SelectUserModal from './modules/SelectUserModal'
// import RoleModal from './modules/RoleModal'
// import UserModal from './modules/UserModal'
// import { filterObj } from '@/utils/util'
// import UserRoleModal from './modules/UserRoleModal'
// import moment from 'moment'
import examineAdd from './components/examineAdd'
import Vue from 'vue'

export default {
  name: 'RoleUserList',
  // mixins: [JeecgListMixin],
  components: {
    examineAdd
    // UserRoleModal,
    // SelectUserModal,
    // RoleModal,
    // UserModal,
    // moment
  },
  data() {
    return {
      imgUrl: '',
      dataSource: [],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-Access-Token': this.$ls.get(ACCESS_TOKEN)
      },
      options: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      selectedRowKeys: [],
      rightcolval: 0,
      columns: [
        {
          title: '线索编号',
          align: 'center',
          dataIndex: 'leadsCode'
        },
        {
          title: '线索类型',
          align: 'center',
          dataIndex: 'serviceId_dictText'
        },
        {
          title: '任务状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '客户信息',
          align: 'center',
          dataIndex: 'contacts',
          scopedSlots: { customRender: 'contacts' }
        },
        {
          title: '最后编辑时间',
          dataIndex: 'updateTime',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      statusOptions: [
        {
          value: '1',
          label: '待分配'
        },
        {
          value: '2',
          label: '待确认'
        },
        {
          value: '3',
          label: '已分配'
        },
        {
          value: '4',
          label: '已跟进'
        },
        {
          value: '5',
          label: '已成单'
        },
        {
          value: '6',
          label: '已流单'
        }
      ], // 任务状态数据
      statusValue: [],
      // 详情
      pstyle1: {
        fontSize: '20px',
        color: 'black',
        borderBottom: '1px solid #eeeeee'
      },
      pstyle2: {
        fontSize: '16px',
        borderBottom: '1px solid #eeeeee',
        width: '100%',
        left: 0,
        lineHeight: '30px',
        padding: '20px 24px'
      },
      visible: false,
      serviceId_dictText: '', //  业务类型
      leadsCode: '', // 线索编号
      orderCode: '', // 订单编号
      // 时间轴数据
      timeData: [
        {
          title: '已上传付款回执',
          time: '2021-12-12  15:13',
          childData: [
            {
              name: '备注:',
              text: '这个回款很及时'
            },
            {
              name: '操作人:',
              text: '刘德华'
            }
          ]
        },
        {
          title: '已成单',
          time: '2021-12-12  15:13',
          childData: [
            {
              name: '备注:',
              text: '这个回款很及时'
            },
            {
              name: '操作人:',
              text: '刘德华'
            }
          ]
        },
        {
          title: '已跟进',
          time: '2021-12-12  15:13',
          code: '123456',
          childData: [
            {
              name: '备注:',
              text: '这个回款很及时'
            },
            {
              name: '操作人:',
              text: '刘德华'
            }
          ]
        },
        {
          title: '已分配',
          time: '2021-12-12  15:13',
          code: '123456',
          childData: [
            {
              name: '操作人:',
              text: '刘德华'
            }
          ]
        }
      ],
      // 分配
      allotDialog: false,
      optionss: [], //  部门级联选择器
      roleList: [], // 角色下拉选择器
      departmentValue: [],
      ownerUservalue: '',
      ownerUserId: '', //所属用户id
      threadId: '',
      // 编辑弹框参数
      visibleCreateModal: false,
      btnList: [
        {
          value: '4',
          label: '跟进'
        },
        {
          value: '5',
          label: '成单'
        },
        {
          value: '6',
          label: '流单'
        }
      ],
      btnIndex: '0',
      companyValue: '', //公司名称
      goldMedalValue: '',
      goldMedalList: ['金牌业务', '金牌项目', '金牌团队', '金牌资源'],
      editStatus: '',
      // 图片上传
      previewVisible: false,
      previewImage: '',
      fileList: [],
      contacts: '', // 联系人
      contactTel: '', // 联系电话
      remarks: '', // 备注
      taskForm: {
        taskCode: '', // 线索编号
        phone: '', // 客户手机号
        submitter: '', // 提交人
        taskStatus: [] //任务状态
      },
      threadData: [],
      moneyValue: '', //合同金额
      areaValue: '', //备注
      model: {},
      userInfo: '',
      updateShow: false
    }
  },
  mounted() {
    this.getList()
    const userInfo = JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value
    if (userInfo) {
      this.userInfo = userInfo
    }

  },
  methods: {
    updateExamine() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.$refs.examineAdd.show = true
      this.getDepart('examine')
      this.$refs.examineAdd.headers = { 'X-Access-Token': token }

      this.$refs.examineAdd.contractAmount = this.model.contractAmount
      this.$refs.examineAdd.companyName = this.model.companyName
      this.$refs.examineAdd.id = this.model.id
      this.$refs.examineAdd.approvalPersonId = this.userInfo.id
      this.$refs.examineAdd.updateBy = this.userInfo.username

    },
    examineChange(){
      this.visible = false
      this.model = {}
      this.getList()
      this.contacts = ''
      this.contactTel = ''
      this.remarks = ''
      this.threadData = ''
      this.serviceId_dictText = ''
      this.leadsCode = ''
      this.updateShow =false
    },
    Export() {
      const token = JSON.parse(window.localStorage.getItem('pro__Access-Token')).value
      const selections = this.selectedRowKeys.toString()
      window.open(
        `https://jbd.iminggu.com/jeecg-boot/jbd/jbdLeads/exportXlsTask?selections=${selections}&token=${token}`
      )
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    async getList() {
      let data = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        contactTel: this.taskForm.phone, // 客户手机号
        contacts: this.taskForm.submitter, // 提交人
        leadsCode: this.taskForm.clueCode, // 线索编号
        status: this.taskForm.taskStatus // 任务状态
      }
      const res = await jbdLeadList(data)
      if (res.code == 200) {
        console.log(res)
        this.dataSource = res.result.records
      }
    },
    async getDetails(id) {
      const res = await queryById({ id })
      if (res.code === 200) {
        this.model = res.result.jbdLeads
        if (this.userInfo.username === 'admin' && (this.model.superiorApprovalStatus === 1 || this.model.superiorApprovalStatus === 4)) {
          this.updateShow = true
          this.$refs.examineAdd.status = this.model.superiorApprovalStatus
          if (this.model.superiorApprovalStatus === 1) {
            this.$refs.examineAdd.title = '主管审批'
          } else {
            this.$refs.examineAdd.title = '终审确认'
            this.$refs.examineAdd.flag = true
            this.$refs.examineAdd.approvalProcess = this.model.approvalProcess
            if(this.model.approvalProcess ===1){
              this.$refs.examineAdd.approvalLabel = '常规审批'
            }else{
              this.$refs.examineAdd.approvalLabel = '领导特批'
            }
          }
        }
        if (this.userInfo.userIdentity === 2 && this.model.superiorApprovalStatus === 1) {
          this.updateShow = true
          this.$refs.examineAdd.title = '主管审批'
        }
        if (this.userInfo.id === this.model.approvalPersonId && this.model.superiorApprovalStatus === 4) {
          this.updateShow = true
          this.$refs.examineAdd.status = this.model.superiorApprovalStatus
          if (this.model.superiorApprovalStatus === 1) {
            this.$refs.examineAdd.title = '主管审批'
          } else {
            this.$refs.examineAdd.title = '终审确认'
            this.$refs.examineAdd.flag = true
            this.$refs.examineAdd.approvalProcess = this.model.approvalProcess
            if(this.model.approvalProcess ===1){
              this.$refs.examineAdd.approvalLabel = '常规审批'
            }else{
              this.$refs.examineAdd.approvalLabel = '领导特批'
            }
          }
        }

        this.contacts = res.result.jbdLeads.contacts // 联系人
        this.contactTel = res.result.jbdLeads.contactTel // 联系电话
        this.remarks = res.result.jbdLeads.remarks // 备注
        this.threadData = res.result.recordList
        this.serviceId_dictText = res.result.jbdLeads.serviceId_dictText
        this.leadsCode = res.result.jbdLeads.leadsCode
      }
    },
    // 跟进
    async getFollowUp(data) {
      const res = await followUp(data)
      if (res.code == 200) {
        this.visibleCreateModal = false
        this.visible = false
        this.getList()
        this.$message.success('分配成功')
      }
    },
    // 成单和流单
    async getOrderFormOrflow(data) {
      const res = await orderFormOrflow(data)
      if (res.code == 200) {
        this.visibleCreateModal = false
        this.visible = false
        this.getList()
        this.$message.success('分配成功')
      }
    },
    // 付款回执
    async getPaymentReceipt(data) {
      const res = await paymentReceipt(data)
      if (res.code == 200) {
        this.visibleCreateModal = false
        this.visible = false
        this.getList()
        this.$message.success('分配成功')
      }
    },
    getAvatarView(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    // 查询
    selectInfo() {
      console.log(this.taskForm)
      this.getList()
    },
    // 详情弹框
    showDrawer(value) {
      this.getDetails(value.id)
      this.visible = true
      this.threadId = value.id
      this.editStatus = value.status
      this.ownerUserId = value.ownerUserId
      this.btnIndex = value.status - 3
    },
    afterVisibleChange(val) {
      console.log('visible', val)
    },
    onClose() {
      this.visible = false
      this.serviceId_dictText = ''
      this.leadsCode = ''
      this.contacts = '' // 联系人
      this.contactTel = '' // 联系电话
      this.remarks = '' // 备注
      this.threadData = []
    },
    onStatusChange(value) {
      this.taskForm.taskStatus = value
      this.statusValue = this.statusOptions[value - 1].label
      console.log(this.statusValue)
    },
    resetForm() {
      // 表单重置
      this.statusValue = []
      this.$set(this.taskForm, 'phone', '') // 客户手机号
      this.$set(this.taskForm, 'submitter', '') // 提交人
      this.$set(this.taskForm, 'clueCode', '') // 线索编号
    },
    handleTableChange(e) {
      this.ipagination.current = e.current
      this.ipagination.pageSize = e.pageSize
      this.getList()
    },
    // 分配弹框
    getallot(value) {
      if (this.editStatus < 3) {
        console.log(value)
        this.allotDialog = true
        this.getDepart()
      } else {
        this.$message.error('该线索已分配')
      }
    },
    cancelDialog() {
      this.allotDialog = false
      this.departmentValue = []
      this.ownerUservalue = []
    },
    async allotOK() {
      this.allotDialog = false
      const setData = {
        id: this.threadId,
        ownerUserId: this.ownerUserId,
        status: 3
      }
      const res = await leadsDistribution(setData)
      if (res.code == 200) {
        this.$message.success(`${res.result}`)
        this.getList()
      }
    },
    // 获取部门级联选择器
    async getDepart(val) {
      const res = await getDepartSelect()
      if (res.code === 0) {
        if (val === 'examine') {
          this.$refs.examineAdd.options = res.result
        } else {
          this.optionss = res.result
        }
      }
    },
    //线索类型
    async typeChange(e) {
      const setData = {
        id: e[1]
      }
      const res = await getRoleSelect(setData)
      if (res.code == 0) {
        this.roleList = res.result.records
      }
    },
    // 编辑弹框 弹框事件
    openAllotDialog() {
      this.visibleCreateModal = true
    },
    handleModalCancel() {
      this.visibleCreateModal = false
    },
    handleModalOk() {
      let data = {
        id: this.threadId,
        companyName: this.companyValue,
        tag: this.goldMedalValue,
        contractAmount: this.moneyValue,
        remarks: this.areaValue,
        path: this.imgUrl
      }
      if (this.btnIndex == 0) {
        data.status = 4
        this.getFollowUp(data)
      } else if (this.btnIndex == 1 || this.btnIndex == 2) {
        if (this.btnIndex == 1) {
          data.status = 5
        } else {
          data.status = 6
        }
        this.getOrderFormOrflow(data)
      } else if (this.btnIndex == 3) {
        this.getPaymentReceipt(data)
      }

    },
    getBtnIndex(index) {
      this.btnIndex = index
    },
    // 图片上传
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      console.log(file)
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    ss(value) {
      console.log(value)
      console.log(this.goldMedalValue)
    }
  }
}
</script>
<style lang='less' scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fafafa;
  padding: 0 20px;

  .name {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.col-title {
  display: inline-block;
  width: 100px;
  color: #000000;
  margin-right: 20px;
}

.timeTitle {
  margin: 20px 0;
}

.timeline-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.timeline-text {
  color: #000000;
}

.allotDialog-top {
  display: flex;
  justify-content: space-evenly;
  padding: 20px 0;
}

.info-left {
  width: 100%;
  height: 60px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .info-tag {
    background: rgba(255, 171, 45, 0.12);
    border-radius: 4px;
    font-size: 14 rpx;
    font-weight: 400;
    color: #ffab2d;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px;
    margin-right: 38px;
  }

  .name {
    .tag {
      margin-left: 10px;
      font-size: 14px;
      color: rgb(255, 115, 0);
    }
  }

  .phone {
    span:nth-child(1) {
      margin: 0 20px;
    }
  }
}

.btn-item {
  width: 80px;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  text-align: center;
  border: 2px solid #cccccc;
  color: #000000;
  border-radius: 5px;
}

.allotDialog-top .active {
  border-color: rgb(22, 106, 255);
  background: rgb(22, 106, 255);
  color: #ffffff;
}

.money {
  margin: 10px 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.input-title {
  width: 100px;
  color: #000000;
}

.select-title {
  margin-bottom: 10px;
}

.select-title span {
  font-size: 14px;
  color: #000000;
  margin-right: 10px;
}

.select-input .ant-input {
  height: 120px;
}

.select-content {
  margin: 20px 10px 0 24px;

  .select-title {
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
    }
  }

  .select-btn {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
    }
  }
}

/deep/ .ant-modal-body {
  padding: 0;
}

/deep/ .ant-drawer-body {
  padding: 0;
}

.allotDialog-remarks {
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 400;
  color: #656565;
  border-top: 1px solid #e8e8e8;
}

.allotDialog-remark {
  padding: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #656565;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
</style>
